<template>
  <el-dialog class="mask" :visible.sync="showMask" width="30%" fullscreen>
    <div class="mask" @click.self.stop="showMask = false">
      <!-- 人才简历 -->
      <div class="mask-box1" v-show="type == 'invite1'">
        <div class="mask-close el-icon-close" @click="back"></div>
        根据用户设置，仅对招聘相应岗位的企业展示简历
      </div>
      <div class="mask-box" v-show="type == 'invite4'">
        <!-- <div class="mask-close el-icon-close" @click="close"></div> -->
        <div class="mask-content">
          因用户隐私权限设置，需认证企业用户才可查看个人简历，是否要认证招聘企业？
        </div>
        <div class="mask-btn-wrap">
          <div class="mask-btn mask-btn-top" @click.stop="back">不了</div>
          <div class="mask-btn mask-btn-bottom" @click.stop="toAuthenticate()">
            去认证
          </div>
        </div>
      </div>
      <div class="mask-box" v-show="type == 'invite5'">
        <!-- <div class="mask-close el-icon-close" @click="close"></div> -->
        <div class="mask-content">
          屏蔽后不会对你推荐该人才，你发布的信息也不会对其展示
        </div>
        <div class="mask-btn-wrap">
          <div class="mask-btn mask-btn-top" @click.stop="close">取消</div>
          <div class="mask-btn mask-btn-bottom" @click.stop="qd_shield()">
            确定
          </div>
        </div>
      </div>

      <!-- 职位 -->
      <div class="mask-box" v-show="type == 'invite2'">
        <div class="mask-close el-icon-close" @click="close"></div>
        <div class="mask-content">
          屏蔽后不会对你推荐该公司职位，你发布的信息也不会对该公司展示
        </div>
        <div class="mask-btn-wrap">
          <div class="mask-btn mask-btn-top" @click.stop="getShield(1)">
            不看这条信息
          </div>
          <div class="mask-btn mask-btn-bottom" @click.stop="getShield(2)">
            不看TA发布的信息
          </div>
        </div>
      </div>

      <!-- 公司 -->
      <div class="mask-box" v-show="type == 'invite6'">
        <div class="mask-close el-icon-close" @click="close"></div>
        <div class="mask-content">
          屏蔽后不会对你推荐该公司职位，你发布的信息也不会对该公司展示
        </div>
        <div class="mask-btn-wrap">
          <div class="mask-btn mask-btn-top" @click.stop="close">取消</div>
          <div class="mask-btn mask-btn-bottom" @click.stop="getShield2()">
            确定
          </div>
        </div>
      </div>
      <!-- 发布兼职 -->
      <div class="mask-box" v-show="type == 'deliver'">
        <!-- <div class="mask-close el-icon-close" @click="close"></div> -->
        <div class="mask-content" style="text-align: center; margin-bottom: 12px">
          提示
        </div>
        <div class="mask-content-main">
          企业将在简历审核通过后收到您投递的简历。
        </div>
        <div class="mask-btn-wrap">
          <div class="mask-btn mask-btn-bottom" @click.stop="confirmRP()">
            确定
          </div>
        </div>
      </div>
      <!-- 投递简历 -->
      <div class="mask-box" v-show="type == 'releasePart' ||
        type == 'releaseFull' ||
        type == 'releaseResume'
        ">
        <!-- <div class="mask-close el-icon-close" @click="close"></div> -->
        <div class="mask-content" style="text-align: center; margin-bottom: 12px">
          提示
        </div>
        <div class="mask-content-main"><p style="text-align: center;">提交成功，请耐心等待审核。</p></div>
        <div class="mask-btn-wrap">
          <div class="mask-btn mask-btn-bottom" @click.stop="confirmRP()">
            确定
          </div>
        </div>
      </div>
      <!-- 发布时 判断要去认证 -->
      <div class="mask-box" v-show="type == 'auth'">
        <!-- <div class="mask-close el-icon-close" @click="close"></div> -->
        <div class="mask-content" style="text-align: center; margin-bottom: 12px">
          提示
        </div>
        <div class="mask-content-main">您还未认证,请认证后再来发布！</div>
        <div class="mask-btn-wrap">
          <div class="mask-btn mask-btn-top" @click.stop="close">取消</div>
          <div class="mask-btn mask-btn-bottom" @click.stop="confirmAuth()">
            确定
          </div>
        </div>
      </div>
      <!-- 个人点发布全职职位时 -->
      <div class="mask-box" v-show="type == 'authauth'">
        <!-- <div class="mask-close el-icon-close" @click="close"></div> -->
        <!-- <div class="mask-content" style="text-align: center; margin-bottom: 12px">
          提示
        </div> -->
        <div class="mask-content-main" style="text-align: center;;">认证企业用户可以发布招聘信息，是否要认证招聘企业?</div>
        <div class="mask-btn-wrap" style="display: flex;justify-content: space-between;">
          <div class="mask-btn mask-btn-top" @click.stop="close" style="width: 142px;">不了</div>
          <div class="mask-btn mask-btn-bottom" @click.stop="confirmAuth()" style="width: 142px;">
            去认证
          </div>
        </div>
      </div>
      <!-- 监理方面 -->
      <div class="mask-box3" v-show="type == 'invite3'">
        <div v-loading.lock="resumeLoading" element-loading-text="拼命加载中"
          element-loading-background="rgba(255, 255, 255, 0.8)">
          <div class="mask-close el-icon-close" @click="close"></div>
          <div class="mask-title3">{{ mobanTitle }}预览</div>

          <div class="mask-content3">
            <template v-if="mobanData.picture">

              <img :src="$resmeUpload + mobanData.picture" alt="" class="mask-img" />
            </template>
          </div>
          <div class="mask-btn-wrap3">
            <div class="mask-btn3 mask-btn-left" @click.stop="obtainResumeTemplates(1)">
              使用模板投递
            </div>
            <div class="mask-btn3 mask-btn-right" @click.stop="obtainResumeTemplates(2)">
              保存到本地
            </div>
          </div>
        </div>
      </div>

      <div class="mask-box3" v-show="type == 'yulan'">
        <div class="mask-close el-icon-close" @click="close"></div>
        <!-- <div class="mask-title3">
          模版预览
        </div> -->
        <div class="mask-content3" style="height:auto;">

          <img :src="item" v-for="(item, index) in imgList" :key="'s' + index" alt="" class="mask-img2"
            @click="previewImg(item)" />

        </div>
        <!-- <div class="mask-btn-wrap3">
          <div class="mask-btn3 mask-btn-left">使用模板投递</div>
          <div class="mask-btn3 mask-btn-right">保存到本地</div>
        </div> -->
      </div>

      <!-- 展示未读的认证请求 -->
      <div class="mask-box" v-show="type == 'unRead'">
        <!-- <div class="mask-close el-icon-close" @click="close"></div> -->
        <!-- <div class="mask-content" style="text-align: center; margin-bottom: 12px">
          提示
        </div> -->
        <div class="mask-content-main" style="text-align: center;;">{{ data.content || '暂无认证' }}</div>
        <div class="mask-btn-wrap" style="display: flex;justify-content: space-between;">
          <div class="mask-btn mask-btn-top" @click.stop="close(), $emit('dealWith', false, data)" style="width: 142px;">
            拒绝
          </div>
          <div class="mask-btn mask-btn-bottom" @click.stop="close(), $emit('dealWith', true, data)"
            style="width: 142px;background-color: #64b6a8;color: #fff;">
            同意
          </div>
        </div>
      </div>
      <iframe style="display:none;" name="hiddeniframe" id="hiddeniframe"></iframe>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default() {
        return {};
      }
    },
    data2: {
      type: Object,
      default() {
        return {};
      }
    },
    imgList: {
      type: Array,
      default() {
        return [];
      }
    },
    autoShow: {
      type: Boolean,
      default: false
    },
    autoType: {
      type: String,
      default: ''
    }
  },
  watch: {
    autoShow: {
      handler(newV, oldV) {
        this.showMask = newV

      },
      immediate: true
    },
    autoType: {
      handler(newV, oldV) {
        this.type = newV

      },
      immediate: true
    },

  },
  data() {
    return {
      item: {},
      showMask: false,
      type: "",

      mobanTitle: "",
      resumeLoading: false,
      mobanData: {}
    };
  },
  methods: {
    open(type, option) {
      if (type == "invite3") {
        // 如果是简历魔板
        this.renderMoban(option);
      }

      this.type = type || "invite1";
      this.showMask = true;
    },
    back() {
      this.$router.back(0);
      this.showMask = false;
    },
    close() {
      this.showMask = false;
    },
    previewImg(item) {

      this.$hevueImgPreview({
        multiple: true,
        nowImgIndex: this.imgList.findIndex((item2) => item == item2),
        imgList: this.imgList,
      });
    },
    // 确认去认证页面
    confirmAuth() {
      if (this.$route.query.type == 'publishPartTimeJob') {
        this.openUrlb('/invite/release', {
          type: 'certificationInformation'
        })
      } else {
        this.openUrlb('/invite/release', {
          type: 'certificationCompany'
        })
      }
      this.close()


    },
    // 发布兼职的确定 | 投递简历
    confirmRP() {
      if (this.type == 'releasePart') {
        this.openUrls('/my/bbcz/wdRelease')
        return
      }
      this.$emit("confirmRP");
    },
    // 非企业用户其认证
    toAuthenticate() { },
    // 屏蔽简历
    qd_shield() {
      let data = {};
      data = {
        shieldPeople: JSON.parse(localStorage.getItem("userInfo")).id,
        associationId: this.data.userInformation.id,
        associationName: this.data.resumeTitle,
        shieldingType: 4,
        shieldingTime: this.$time.getTimes()
      };
      this.$postHttp("/api/mobile/personnelOwner/increaseShield", data).then(
        res => {
          this.mySuccessMessage(res.msg);
          setTimeout(() => {
            if (this.$route.query.indexss == 1) {
              // let pages = getCurrentPages();
              // let prevPage = pages[pages.length - 2];
              // prevPage.$vm.indexss = 1;
            }
            this.openUrls('/invite/resume');
          }, 500);
        }
      );
    },
    // 屏蔽公司职位?,跟下面一样？
    getShield2() {
      if (!localStorage.getItem("userInfo")) {
        // this.myErrorMessage("请先登录！");
        return;
      }
      let data = {};
      data = {
        shieldPeople: JSON.parse(localStorage.getItem("userInfo")).id,
        associationId: this.data2.userId,
        associationName: this.data.enterpriseName,
        shieldingType: 2,
        shieldingTime: this.$time.getTimes()
      };
      this.$postHttp("/api/mobile/personnelOwner/increaseShield", data).then(
        res => {
          this.mySuccessMessage(res.msg);
          this.close()
          setTimeout(() => {
            this.$router.back(0);
          }, 500);
        }
      );
    },
    // 屏蔽单个职位或者公司职位
    getShield(index) {
      let data = {};
      // if()
      if (!localStorage.getItem("userInfo")) {
        // this.myErrorMessage("请先登录！");
        return;
      }
      if (index == 1) {
        data = {
          shieldPeople: JSON.parse(localStorage.getItem("userInfo")).id,
          associationId: this.data.id,
          associationName: this.data.title,
          shieldingType: 3,
          shieldingTime: this.$time.getTimes()
        };
      } else {
        data = {
          shieldPeople: JSON.parse(localStorage.getItem("userInfo")).id,
          associationId: this.data.userInformationDto.id,
          associationName:
            this.data.userInformationDto.nikeName || "未命名用户",
          shieldingType: 1,
          shieldingTime: this.$time.getTimes()
        };
      }
      this.$postHttp("/api/mobile/personnelOwner/increaseShield", data).then(
        res => {
          this.mySuccessMessage(res.msg);
          this.close();
          setTimeout(() => {
            // this.$router.back(0);
            window.close();
          }, 1000);
        }
      );
    },
    // 简历魔板渲染
    renderMoban(param = {}) {
      this.mobanTitle = param.title + param.content;
      let obj = JSON.parse(localStorage.getItem("resume_preview")) || {};
      if (obj.workExperience.length == 2)
        delete obj.workExperience
      console.log("resume_previewresume_preview", obj);

      if (localStorage.getItem("resume_preview")) {
        this.resumeLoading = true
        this.mobanData = {}
        this.$postHttp("/api/mobile/personnelOwner/resumePreview", {
          ...obj,
          resumeTemplatePath: param.attachmentConversion,

        }).then(res => {
          this.mobanData = res;
          this.resumeLoading = false
        }).catch((err) => {
          this.resumeLoading = false
        });
      }
    },
    obtainResumeTemplates(i) {
      if (i == 1) {
        // 使用
        this.$bus.$emit("addeventLisenterResumeTemplate", {
          enclosureWord: this.mobanData.attachmentAddress,
          enclosurePdf: this.mobanData.pdf,
          pictureAttachment: this.mobanData.picture
        });
        this.close()
        this.$router.back();

        // resumeTemplate
        // 回退
      } else {
        // 下载
        //  url: this.$resmeUpload + this.mobanData.pdf
        // var url = this.$resmeUpload + this.mobanData.pdf;
        // var elem = document.createElement('a');
        // elem.href = url;
        // elem.target = 'hiddenIframe';
        // elem.click();
        // return
        var filename = this.mobanData.attachmentAddress.substr(this.mobanData.attachmentAddress.lastIndexOf('/') + 1)
        const a = document.createElement('a');
        a.style.display = 'none';
        a.href = this.$resmeUpload + this.mobanData.attachmentAddress;
        a.target = "_blank"
        // 保存下来的文件名
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        // 移除元素
        setTimeout(() => {
          document.body.removeChild(a);
          window.URL.revokeObjectURL(this.$resmeUpload + this.mobanData.attachmentAddress);
        })


        console.log('filename', this.$resmeUpload + this.mobanData.pdf)
        return
        fetch(this.$resmeUpload + this.mobanData.pdf).then(async res => await res.blob()).then(
          (blob) => {
            console.log(blob);
            // 创建隐藏的可下载链接
            const a = document.createElement('a');
            a.style.display = 'none';
            a.href = URL.createObjectURL(blob);
            // 保存下来的文件名
            a.download = filename;
            document.body.appendChild(a);
            a.click();
            // 移除元素
            document.body.removeChild(a);
            window.URL.revokeObjectURL(url);
          }
        )
      }
    },

  }
};
</script>

<style lang="less" scoped>
/deep/ .el-dialog {
  background: rgba(0, 0, 0, 0.2);

  .el-dialog__header {
    display: none;
  }

  .el-dialog__body {
    padding: 0;
  }
}

.mask-img2 {
  width: 80% !important;
  display: block;
  margin: 0 auto;
  height: auto !important;
  object-fit: cover;
  margin-bottom: 24px;
}

.mask {
  // position: relative;

  // background: rgba(0, 0, 0, 0.2);

  .mask-box1 {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
  }

  .mask-box {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
  }

  .mask-box3,
  .mask-box1,
  .mask-box {
    box-sizing: border-box;

    display: inline-block;
    padding: 40px 35px 20px 35px;
    text-align: left;
    background: #ffffff;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    font-size: 24px;
    font-weight: 400;
    color: #333333;
    line-height: 34px;
    width: 432px;

    .mask-close {
      position: absolute;
      color: #999999;
      top: 10px;
      right: 10px;
      font-size: 26px;
      cursor: pointer;
    }

    .mask-content {
      font-size: 24px;
      font-weight: 400;
      color: #333333;
      line-height: 28px;
    }

    .mask-btn-wrap {
      .mask-btn {
        width: 284px;
        height: 50px;
        border-radius: 6px 6px 6px 6px;
        opacity: 1;
        border: 1px solid #64b6a8;
        margin: 0 auto;
        text-align: center;
        font-size: 24px;
        font-weight: 400;
        color: #64b6a8;
        line-height: 50px;
        margin-top: 20px;
        cursor: pointer;
      }
    }
  }

  .mask-box3 {
    width: 692px;
    // height: 1999px;

    position: relative;
    padding-bottom: 50px;
    margin-top: 13%;
    transform: translateX(-50%);
    left: 50%;
    margin-bottom: 50px;

    .mask-title3 {
      height: 39px;
      font-size: 28px;
      font-weight: 400;
      color: #333333;
      line-height: 39px;
      text-align: center;
      margin-bottom: 10px;
    }

    .mask-content3 {
      padding: 0 32px;

      min-height: 781px;
      opacity: 1;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .mask-btn-wrap3 {
      // margin-top: 26px;
      padding: 26px 0 50px;
      display: flex;
      justify-content: space-around;

      .mask-btn3 {
        width: 200px;
        height: 50px;
        background: #64b6a8;
        border-radius: 6px 6px 6px 6px;
        opacity: 1;
        text-align: center;

        font-size: 20px;
        font-weight: 500;
        color: #ffffff;
        line-height: 50px;
        cursor: pointer;
      }
    }
  }
}
</style>
